<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 写css都是在style节点里面   css写了多个属性， 内联>外部>#>class>元素选择器。-->
    <style type="text/css">
        .class1 {
            background-color: yellow;
        }

        .class2 {
            font-size: 50px;
        }
    </style>
</head>

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        $("#buttonId1").click(function () {
            //append 追加元素到一个对象里面
            $("#firstDivID").append("<b>Hello  I from Append</b>");
        })

        $("#appendToBtnID").click(function () {
            //演示了appendTo,是子对象加到父对象里面
            // 如果要对一段html代码进行JQuery的对象操作,那么直接可以用$(代码片段)把代码块转化成JQuery对象
            $("<li>深圳</li>").appendTo($("#cityID"));
        })

//演示了After的用法,插入到一个元素后面
        $("#afterBtnID").click(function () {
            $("#firstDivID").after("<div> I am Div From after </div>");
        })

        //演示了Empty的用法,清空子元素,当前元素是在的
        $("#emptyBtnID").click(function () {
            // $("#firstDivID").after("<div> I am Div From after </div>");
            $("#studentID").empty();
        })
        //演示了remove的用法,删除当前元素,
        $("#removeBtnID").click(function () {
            $("#studentID").remove();
        })

        //演示了clone的用法,一般情况下如果有id的话就不能clone,最好用元素选择器,或者类选择器的时候克隆
        $(".cloneBtnClass").click(function(){
            // clone的时候如果传入参数是true,那么就把原来元素的事件也复制过来
            $(this).clone(true).insertAfter(this);
        });

        //演示了clone的用法,一般情况下如果有id的话就不能clone,最好用元素选择器,或者类选择器的时候克隆
        $(".cloneBtnClass").click(function(){
            // clone的时候如果传入参数是true,那么就把原来元素的事件也复制过来
            $(this).clone(true).insertAfter(this);
        });

        //演示了html的用法,如果是读取,那么就会显示所有的包含的子元素html代码,但是不包含本身html
        $("#showDatialbtnID").click(function(){
            // 演示html的读取方法
           alert($("#showDatailDivID").html());

           //写入html,会覆盖掉以前的所有子元素
            ($("#showDatailDivID").html("<span style='background-color: yellow'> I am Span From html()</span>"));
        });

        //演示了text的用法,如果是读取,那么就会显示所有文本
        $("#showDatiaTextlbtnID").click(function(){
            // 演示text的读取方法
           alert($("#showDatailDivID").text());

           //写入text ,会覆盖掉以前的所有子元素,如果写入的是含有html代码的文本,那么html代码也会显示出来,并且不会转义
            //会把传入的字符串原封不动的打印出来
            ($("#showDatailDivID").text("<span style='background-color: yellow'> I am Span From html()</span>"));
        });

        //演示了css的用法,
        $("#cssbtnID").click(function () {
            // 演示css的读取方法 , 要传入的属性的名字
            alert($("#showDatailDivID").css("color"));

            // 可以通过简单的键值对 对元素设值
            // $("#showDatailDivID").css("color", "yellow");

            //如果css有多个属性,那么就不能用键值对来设值,可以用一个字符串把所有参数设值进去
            $("#showDatailDivID").css({color: 'red', background: 'blue'});


        });


    })


</script>
<body>
<div id="firstDivID"> this is first div</div>
<ul id="cityID">
    <li>永州</li>
    <li>长沙</li>
    <li>兰州</li>
    <li>深圳</li>
</ul>
<OL id="studentID">
    <li>zhang</li>
    <li>wang</li>
    <li>zhao</li>
</OL>
<button id="buttonId1">append</button>
<button id="appendToBtnID">appendTo</button>
<button id="prependBtnID">propend</button>
<button id="afterBtnID">after</button>
<button id="emptyBtnID">empty</button>
<button id="removeBtnID">remove</button>
<button  class="cloneBtnClass">clone</button>
<button  id="showDatialbtnID">ShowDatail</button>
<button  id="showDatiaTextlbtnID">showDatialText</button>
<button  id="cssbtnID">cssbtnID</button>
<div id="showDatailDivID" style="color: red"> I as show Datail Div <span> I am Span</span></div>
</body>
</html>